<template>
  <div class="materialContentComponent">
    <div class="input-content">
      <InputContent
        ref="inputContentRef"
        :reKey="props.reKey"
        :tabs="props.inputContentTabs"
        :btns="props.inputContentBtns"
        :content="props.inputContentData"
        :placeholder="props.placeholder"  
      />
    </div>
    <div class="material-content">
      <MaterialComponent
        ref="materialComponentRef"
        :isHiddenLabel="props.isHiddenLabel"
        :ecommerceShareDisabled="props.ecommerceShareDisabled"
        :reKey="props.reKey"
        :tabs="props.showMaterialTabs"
        :materialData="props.materialContentData"
      />
    </div>
  </div>
</template>

<script setup lang='ts'>
import {reactive, ref, computed, watch, onMounted, onUnmounted, provide, nextTick} from "vue"
import {useRouter, useRoute} from "vue-router"
import InputContent from './components/InputContent.vue'
import MaterialComponent from './components/MaterialComponent.vue'
import bus from '@/utils/bus'

const inputContentRef = ref<HTMLElement|null>();
const materialComponentRef = ref<HTMLElement|null>();
let maxNum = ref<number>(9)

interface StateType{
  content: string
  material: Array<{[propsName:string]: string|number}>,
  restIds: Array<number>,
  newMaterials: Array<{[propsName:string]: string|number}>
}

let state = reactive<StateType>({
  content: '',
  material: () => [],
  restIds: () => [],
  newMaterials: () => []
})

interface Props{
  modelValue: string
  reKey: string
  maxNum: number
  isHiddenLabel: boolean
  ecommerceShareDisabled: boolean
  placeholder: string
  inputContentTabs: Array<number>
  inputContentBtns: Array<number>
  showMaterialTabs: Array<string>
  inputContentData: string
  materialContentData: Array<any>
}

const props = withDefaults(defineProps<Props>(),{
  modelValue: '',
  reKey: '',
  maxNum: 9,
  isHiddenLabel: false,
  ecommerceShareDisabled: false,
  placeholder: '请输入消息',
  inputContentTabs: () => [1, 2],
  inputContentBtns: () => [],
  showMaterialTabs: () => ['1', '2', '3', '4', '5', '6'],
  inputContentData: '',
  materialContentData: () => []
})

const emit = defineEmits(['update:modelValue', 'change', 'changPro', 'changeContent', 'changeMaterials'])

const updateMaterials = (material:any):void => {
  state.material = material
  const res = formatMaterialParams3(state)
  const {content} = state
  emit('changeMaterials', {material})
  emit('changPro', {content, material})
  emit('change', res)
}

const updateContent = (content:any):void => {
  state.content = content
  const res = formatMaterialParams3(state)
  const {material} = state
  emit('changeContent', {material})
  emit('changPro', {content, material})
  emit('change', res)

}

const formatMaterialParams3 = (state: any) => {
  const {content: welcome_text, material} = state
  let type = 0
  let welcome_info = {}
  let welcome_material:any[] = []
  let welcome_local_upload:any[] = []
  let welcome_local_link:any[] = []
  if(material.length){
    material.forEach((item:any) => {
      const {type: type_, id: media_content_id, local: local = false, code: code = ''} = item
      if(local){
        switch(Number(type_)){
          case 3:
            const {link_title, link_url, link_desc, link_share_image} = item
            welcome_local_link.push({link_title, link_url, link_desc, link_share_image, code})
          break;
          default:
            welcome_local_upload.push({type: type_, code})
          break;
        }
      }else{
        welcome_material.push({type: type_, media_content_id})
      }
      type = Number(type_)
    })
  }
  welcome_info = {welcome_text, welcome_material, welcome_local_upload, welcome_local_link}
  return {welcome_info, type}
}

onMounted(()=>{
  bus.on('selectFriendMaterials', updateMaterials)
  bus.on('changeFrienfContent', updateContent)
})

onUnmounted(() => {
  bus.off('selectFriendMaterials', updateMaterials)
  bus.off('changeFrienfContent', updateContent)
})

</script>

<style lang="scss" scoped>
  .materialContentComponent{
    background-color: #F8F8F8;
    border-radius: 8px;
    border: 1px solid #e9e9e9;
    padding: 10px;
    box-sizing: border-box;
    min-width: 200px;
    max-width: 600px;
    .input-content{

    }
    .material-content{

    }

  }
</style>
